<template>
  <div class="app-container">
    <div class="sale-statistics">
      <!-- 搜索区域 -->
      <div class="head-container">
        <div class="form-head">
          <!-- 调取方式 -->
          <el-select
            v-model="query.historyType"
            style="width: 150px"
            class="filter-item"
            :clearable="false"
          >
            <template v-for="item in typeList">
              <el-option
                :label="item.text"
                :value="item.id"
                :key="item.id"
              />
            </template>
          </el-select>
          <!-- 时间 -->
          <datePicker
            :type="query.historyType"
            @change="onChangeTime"
            v-model="defaultDate"
            class="date-item"
            ref="datePicker"
          />
          <!-- 搜索按钮 -->
          <span>
            <el-button
              class="filter-item"
              size="mini"
              type="success"
              icon="el-icon-search"
              @click="onQuery"
            >
              搜索
            </el-button>
            <el-button
              class="filter-item"
              size="mini"
              type="warning"
              icon="el-icon-refresh-left"
              @click="onResetQuery"
            >
              重置
            </el-button>
          </span>
        </div>
        <div class="form-right">
          <el-button
            icon="el-icon-download"
            :loading="loading"
            @click="onExport"
            type="primary"
            size="mini"
          >导出数据</el-button>
        </div>
      </div>
      <!-- 总计... -->
      <sumStatistics :data="costSums"/>
      <!--表格渲染-->
      <div class="table">
        <tableStatistics
          :summaryMethod="summaryMethod"
          v-loading="crud.loading"
          ref="tableStatistics"
          :columns="columns"
          :data="crud.data"
          showSummary
        >
          <template slot="xyPayInfoFee" slot-scope="scope">
            <span>{{ formatMoney(scope.row.xyPayInfoFee, 2) }}</span>
          </template>
          <template slot="xyCost" slot-scope="scope">
            <span>{{ formatMoney(scope.row.xyCost, 2) }}</span>
          </template>
          <template slot="xyProfit" slot-scope="scope">
            <span>{{ formatMoney(scope.row.xyProfit, 2) }}</span>
          </template>
          <template slot="ypPayInfoFee" slot-scope="scope">
            <span>{{ formatMoney(scope.row.ypPayInfoFee, 2) }}</span>
          </template>
          <template slot="ypCost" slot-scope="scope">
            <span>{{ formatMoney(scope.row.ypCost, 2) }}</span>
          </template>
          <template slot="ypProfit" slot-scope="scope">
            <span>{{ formatMoney(scope.row.ypProfit, 2) }}</span>
          </template>
          <template slot="kljPayInfoFee" slot-scope="scope">
            <span>{{ formatMoney(scope.row.kljPayInfoFee, 2) }}</span>
          </template>
          <template slot="kljCost" slot-scope="scope">
            <span>{{ formatMoney(scope.row.kljCost, 2) }}</span>
          </template>
          <template slot="kljProfit" slot-scope="scope">
            <span>{{ formatMoney(scope.row.kljProfit, 2) }}</span>
          </template>
        </tableStatistics>
      </div>
    </div>
  </div>
</template>

<script>
import { costSums, columns, typeList } from '@/const/saleStatistics';
import { infoSalesDateTop } from "@/api/statistics/index";
import { outInfoSalesDate } from "@/api/statistics/index";
import CRUD, { presenter, header } from '@crud/crud';
import tableStatistics from "../components/table";
import sumStatistics from "../components/sum";
import rrOperation from '@crud/RR.operation';
import { formatMoney } from "@/utils/index";
import datePicker from '../components/date';

let defaultCrud = CRUD({
  queryOnPresenterCreated: false,
  query: {
    startTime: null,
    historyType: 0,
    endTime: null,
  },
  resultHandle(crud, res) {
    crud.data = res.infoSaleVoList;
  },
  url: '/drugStatistics/infoSalesDate',
  pagination: false,
  title: '销售统计',
  method: 'post',
});

export default {
  name: "saleStatistics",
  components: {
    tableStatistics,
    sumStatistics,
    rrOperation,
    datePicker
  },
  mixins: [
    presenter(defaultCrud),
    header()
  ],
  data() {
    return {
      statisticsSum: null,
      defaultDate: null,
      loading: false, // 操作按钮防重复提交
      costSums,
      typeList,
      columns
    };
  },
  mounted() {
    if(this.query.startTime && this.query.endTime) {
      this.defaultDate = [
        this.query.startTime,
        this.query.endTime
      ];
    }
  },
  methods: {
    formatMoney,
    [CRUD.HOOK.dataLoadSuccess](crud, list, data) {
      this.statisticsSum ={
        kljCost: data.kljCost,
        kljInfoNum: data.kljInfoNum,
        kljPayInfoFee: data.kljPayInfoFee,
        kljPayInfoNum: data.kljPayInfoNum,
        kljProfit	: data.kljProfit,
        xyCost: data.xyCost,
        xyInfoNum: data.xyInfoNum,
        xyPayInfoFee: data.xyPayInfoFee,
        xyPayInfoNum: data.xyPayInfoNum,
        xyProfit: data.xyProfit,
        ypCost: data.ypCost,
        ypInfoNum: data.ypInfoNum,
        ypPayInfoFee: data.ypPayInfoFee,
        ypPayInfoNum: data.ypPayInfoNum,
        ypProfit: data.ypProfit,
      };
    },
    [CRUD.HOOK.afterRefresh]() {
      this.$nextTick(() => {
        this.$refs.tableStatistics.resizeListener();
      });
    },
    onQuery() {
      if(!this.query.startTime || !this.query.endTime) {
        this.$message.error('请筛选时间范围');
        return;
      }
      this.crud.toQuery();
      this._getTopInfo();
    },
    // 时间处理
    onChangeTime() {
      if(this.defaultDate && this.defaultDate.length) {
        this.query.startTime = this.defaultDate[0];
        this.query.endTime = this.defaultDate[1];
        this.onQuery();
      } else {
        this.query.startTime = null;
        this.query.endTime = null;
      }
    },
    // 重置
    onResetQuery() {
      this.defaultDate = null;
      this.crud.resetQuery(false);
    },
    // 导出
    onExport() {
      let data = {
        ...this.query
      }
      data.startTime += " 00:00:00";
      data.endTime += " 23:59:59";
      outInfoSalesDate(data);
    },
    // 合计
    summaryMethod({ columns }) {
      let res = [];
      columns.forEach(column => {
        switch(column.property) {
          case "date":
            res.push("总计");
            break;
          case "xyPayInfoNum":
          case "xyInfoNum":
          case "ypPayInfoNum":
          case "ypInfoNum":
          case "kljPayInfoNum":
          case "kljInfoNum":
            if(this.statisticsSum && this.statisticsSum[column.property]) {
              res.push(this.statisticsSum[column.property]);
            } else {
              res.push("0");
            }
            break;
          default:
            if(this.statisticsSum && this.statisticsSum[column.property]) {
              res.push(this.formatMoney(this.statisticsSum[column.property], 2));
            } else {
              res.push("0");
            }
            break;
        }
      });
      return res;
    },
    _getTopInfo() {
      infoSalesDateTop().then(res => {
        this.costSums[0].value = res.allInfoNum;
        this.costSums[1].value = res.payInfoNum;
        this.costSums[2].value = this.formatMoney(res.payFee, 2);
        this.costSums[3].value = this.formatMoney(res.costFee, 2);
        this.costSums[4].value = res.cancelInfoNum;
        this.costSums[5].value = this.formatMoney(res.cancelFee, 2);
        this.costSums[6].value = this.formatMoney(res.discountFee, 2);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 84px);
  background: #F5F5F5;
  padding: 15px;

  .sale-statistics {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
    background: #FFFFFF;
    padding: 20px 24px;
    height: 100%;

    .head-container {
      justify-content: space-between;
      display: flex;
    }

    .table {
      height: calc(100% - 127px);
      margin-top: 10px;
    }
  }
}

</style>
